<template>
  <el-dialog title="文本输入框" :visible.sync="dialogVisible" width="500px">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题：" prop="title">
        <el-input v-model="ruleForm.title" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="副标题：" prop="subhead">
        <el-input v-model="ruleForm.subhead" type="textarea" maxlength="200"></el-input>
      </el-form-item>
      <el-form-item label="banner图：" prop="banner">
        <Upload @uploadSuccess="uploadSuccessHandle" v-model="ruleForm.banner"></Upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmEdit('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import Upload from '@/components/common/uploadImg'
  export default {
    name: "EditBanner",
    components: {Upload},
    data(){
      return {
        dialogVisible: false,
        ruleForm: {
          title: '',
          subhead: '',
          banner: ''
        },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
          ],
          subhead: [
            { required: true, message: '请输入副标题', trigger: 'blur' }
          ],
          banner: [
            { required: true, message: '请上传banner图', trigger: 'change' }
          ],
        }
      }
    },
    props: ['info'],
    methods: {
      show() {
        this.dialogVisible = true
        this.ruleForm.title = this.info.title
        this.ruleForm.subhead = this.info.subhead
        this.$nextTick(() => {
          this.ruleForm.banner = this.info.bannerImgs
        })

      },
      confirmEdit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('success', this.ruleForm)
            this.dialogVisible = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      uploadSuccessHandle (val) {
        this.ruleForm.banner = val
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>

</style>
